/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-08 15:40:26
 * @LastEditTime : 2023-05-09 09:23:49
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Template\Scss\TimeMachine.scss
 * @Description  : 
 */
.TimeMachine001 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	& > div {
		height: 100%;

		&.Options {
			width: 502px;
			padding: 40px 8px 40px 40px;
			position: relative;
			// background: rgba(255, 255, 255, 0.35);
			user-select: none;

			& > .Box {
				height: calc(100% - 40px);
				overflow-y: scroll;

				&::-webkit-scrollbar {
					display: none;
				}

				& > div {
					display: flex;
					align-items: flex-start;
					justify-content: center;
					align-content: flex-start;

					& > .Label {
						width: 88px;
						font-size: 18px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #b2fbfd;
						height: 40px;
						display: flex;
						align-items: center;
						text-indent: 15px;
					}

					& > .List {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 8px;

						& > div {
							height: 40px;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1px solid #8fd1d6;
							border-radius: 6px;
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: bold;
							color: #b2fbfd;
							margin-bottom: 8px;
							cursor: pointer;

							&.active {
								background: #084335;
							}
						}
					}
				}
			}

			& > .Btn {
				position: absolute;
				left: 40px;
				right: 8px;
				bottom: 40px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				& > div {
					width: 198px;
					height: 38px;
					border: 2px solid #a5eafd;
					border-radius: 19px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #b2fbfd;
					cursor: pointer;

					&:last-child {
						background: linear-gradient(0deg, #00322a, #02c4a6);
					}
				}
			}
		}

		&.Videos {
			flex: 1;
			padding: 40px;

			.video-react .video-react-video {
				object-fit: fill;
			}
		}
	}
}
